<template>
  <div id="_tables">
    <span>订单详情</span>
    <el-container>
      <el-container>
        <el-aside width="230px">
          <div>
            <div class="_head" >
              <span>&nbsp;&nbsp;&nbsp;订单信息</span>
            </div>
            <div class="_order">
              <span>&nbsp;&nbsp;&nbsp;收货地址:{{OrderItem.receiverName}},{{OrderItem.receiverPhone}},{{OrderItem.receiverProvince}}-{{OrderItem.receiverCity}}-{{OrderItem.receiverRegion}}-{{OrderItem.receiverDetailAddress}}</span><br/>
              <span>&nbsp;&nbsp;&nbsp;买家留言:{{OrderItem.note}}</span><br/>
              <span>&nbsp;&nbsp;&nbsp;订单编号:{{OrderItem.orderSn}}</span><br/>
              <span>&nbsp;&nbsp;&nbsp;商家: {{OrderItem.orderItems[0].merchantName}}</span><br/>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div  v-if="OrderItem.status == 0">
            <span>订单状态：商品已拍下，等待买家付款</span><br/>
            <span>您还有<span></span> 来付款,超时订单自动关闭</span><br/>
            <span>您可以 <el-button>付款</el-button></span>
            <el-link type="primary">取消订单</el-link>
          </div>
          <div v-if="OrderItem.status == 1 || OrderItem.status == 2 ">
            <span>订单状态：买家已付款，等待买家收货</span><br/>
            <span>您可以</span>
            <el-link type="primary">取消订单</el-link>
          </div>
          <div v-if="OrderItem.status == 3">
            <span>订单状态：交易成功</span><br/>
            <span>物流： XXXXXXXXXXX</span><br/>
            <span>您可以 <el-button>评价</el-button></span>
          </div>
          <div v-if="OrderItem.status == 4 || OrderItem.status == 5">
            <span>订单状态：交易关闭</span><br/>
          </div>
        </el-main>

      </el-container>

    </el-container>
    <el-container id="_el">

      <el-table
          :data="OrderItem.orderItems"
          style="width: 100%">
        <el-table-column
            prop="skuPic"
            label=""
            width="180">
          <template slot-scope="scope">
            <img :src="scope.row.skuPic" style="width: 100px" height="100px"/>
          </template>
        </el-table-column>
        <el-table-column
            prop="spuName"
            label="商品"
            width="180">
        </el-table-column>
        <el-table-column
            prop="skuPrice"
            label="单价">
        </el-table-column>
        <el-table-column
            prop="skuQuantity"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="address"
            label="优惠">
        </el-table-column>
        <el-table-column
            label="状态">
          <template>
            <span  v-if="OrderItem.status == 0">待付款</span>
            <span  v-if="OrderItem.status == 1">待发货 </span>
            <span v-if="OrderItem.status == 2">已发货 </span>
            <span  v-if="OrderItem.status == 3">已完成 </span>
            <span  v-if="OrderItem.status == 4">已关闭</span>
            <span  v-if="OrderItem.status == 5">无效订单</span>
          </template>
        </el-table-column>
      </el-table>
    </el-container>

    <el-container id="_container">
      <div id="_payCount">
        <span>商品总价：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{OrderItem.totalAmount}}.00</span><br/>
        <span>运费（快递）：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥0.00</span><br/>
        <span>运费险（卖家赠送）：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ￥0.00</span><br/>
        <span>京豆：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥0.00</span><br/>
        <span id="_sfk">实付款：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="_payAmount">￥{{OrderItem.payAmount}}.00</span></span>
      </div>
    </el-container>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "OrderItem",
  data() {
    return {
      OrderItem: [],
      orderSn: '',
      pageNum: 1,
      pageSize: 6,
    }
  },
  methods: {
    queryOrderSnByOrderItem() {
      axios({
        url: '/api/order/omsOrder/oms/queryOrderSnByOrderItems',
        method: 'get',
        params:{
          orderSn: this.orderSn,
        }
      }).then(response => {
          this.OrderItem = response.data
      })
    }
  },
  created() {
    this.orderSn = this.$route.query.orderSn;
    this.queryOrderSnByOrderItem();
  }
}
</script>

<style scoped>
#_payAmount {
  font-size: 14px;
  font-weight: bold;
  color: #c81623;
}
#_sfk {
  font-size: 14px;
  font-weight: bold;

}
#_el {
  padding-top: 30px;
}
#_container {
  padding-top: 30px;
}
#_payCount {
  padding-top: 40px;
  padding-right: 40px;
  background-color: #E9EEF3;
  height: 170px;
  width: 90%;
  text-align: right;
  line-height: 26px;
}

main.el-main {
  border: 1px solid gainsboro;
  width: 80%;
}
section#_el.el-container {
  border: 1px solid gainsboro;
  width: 100%;
}
._head {
  text-align: left;
  background-color: #bbbbbb;
  color: #333;
}
._order {
  text-align: left;
  background-color: #f8f8f8;
  color: #333;
  height: 250px;
  border: 1px solid gainsboro;
}

#_tables {
  position: relative;
  top: -1250px;
  width: 100%;
  left: 90px;

  float: right;

}

.el-header, .el-footer {

  text-align: center;
  line-height: 25px;
}

.el-aside {
  text-align: center;
  line-height: 40px;
}

.el-main {

  text-align: center;
  line-height: 80px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
